<!DOCTYPE html>
<html>
<head lang="zh-cn">
    <meta charset="UTF-8">
    <!-- 360浏览器强制使用chrome内核 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
    <title>我的券</title>
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/myCss.css">
    <link rel="stylesheet" type="text/css" href="../css/personalcenter.css">
    <link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css">
    <!-- [if IE 7] >
    <link rel="stylesheet" type="text/css" href="../css/font-awesome-ie7.min.css">
    <!-- [endif]-->

</head>
<body style="background-color: #F5F5F5;">

<!-- [if lt IE 9]>
<script src="../js/html5shiv.min.js"></script>
<script src="../js/respond.min.js"></script>
<!-- [endif] -->

<!-- navbar start -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
    <li><a href="./">Miko Tong </a></li>
    <p class="navbar-text">您好！</p>
</ul>
    <ul class="nav navbar-nav navbar-right">
        <li><a href="../">主页</a></li>
        <li class="dropdown">
            <a href="./orders.html" class="dropdown-toggle" id="mydrop" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">我的一起购<i class="icon-sort-down" style="padding-left: 5px;vertical-align: text-top;"></i></a>
            <ul class="dropdown-menu" aria-labelledby="mydrop" style="background-color: #FFF;text-align: center;min-width: 108px;">
                <li><a style="padding: 0" href="./">个人中心</a></li>
                <li><a style="padding: 0" href="./bingo.html">我的拼购</a></li>
                <li><a style="padding: 0" href="./orders.html">我的订单</a></li>
                <li><a style="padding: 0" href="#">我的分享</a></li>
                <li><a style="padding: 0" href="#">绑定账号</a></li>
                <li><a style="padding: 0" href="./updatepassword.html">修改密码</a></li>
                <li><a style="padding: 0" href="./userinfo.html">修改资料</a></li>
            </ul>
        </li>
        <li><a href="../shopping/cart(bingo).html">购物车<span class="badge aqua"></span></a></li>
        <li><a href="./collect.html">收藏夹<span class="badge aqua"></span></a></li>
        <li><a href="#">客户服务<span class="badge aqua"></span></a></li>
        <li><p class="navbar-text time"></p></li>
    </ul>
</nav>
<!-- navbar end -->

<div class="container">
    <div class="row">
        <div class="col-sm-2 col-lg-2 text-center">
            <a href="../" style="color: #f4a624;"><img src="../imgs/logo.png" style="height:58px;width:auto;">
                <p>eachgo.cn</p></a>
        </div><!--logo-->
        <div class="col-sm-2 col-lg-2"></div>
        <div class="col-sm-1 col-lg-1"></div>
        <div class="col-sm-7 col-lg-7" role="form">
            <form action="#" method="post" name="search" role="search">
                <div class="input-group" style="padding-top: 15px;">
                    <label class="sr-only"></label><!--form表单中，label标签必不可少-->
                    <input type="text" maxlength="255" autocomplete="off" class="form-control" placeholder="搜索宝贝">
                    <span class="input-group-btn"><button type="submit" class="my-btn-default-text btn btn-default  my-btn-default-bgcolor">&nbsp;<i class='icon-search h4'></i>&nbsp;</button></span>
                </div>
            </form>
        </div><!--搜索框表单-->
    </div>
    <!--row-search end-->
</div>

<!-- person-info start -->
<div class=" my-jumbotron jumbotron">
    <div id="backdiv" class="h2"><a href="index.html" class="h2">个人中心</a> - <a href="" class="h4">我的券</a></div>
    <div class="backimg">
        <div class="head-img-rect"></div>                   <!-- 箭头标签 -->
        <div class="head-img-circle"><img src="../imgs/personalcenter/head.png" class="img-circle img-thumbnail"></div>     <!-- 头像 -->
        <div><p class="user-info">Miko Tong</p></div>
        <div><p class="user-info">男</p></div>
        <div><p class="user-info">XXX大学</p></div>
    </div>
</div>
<!-- person-info end -->


<!-- content start -->
<div class="container">
    <div class="row">
        <div class="my-cols-right col-sm-3 col-lg-3 btn-group-vertical" role="group">
            <a href="bingo.html" class="mybtn-size btn btn-lg btn-default" >我的拼购</a>
            <a href="orders.html" class="mybtn-size btn btn-lg btn-default" >我的订单</a>
            <a href="../shopping/cart(bingo).html" class="mybtn-size btn btn-lg btn-default" >我的购物车</a>
            <a href="collect.html" class="mybtn-size btn btn-lg btn-default" >收藏夹</a>
            <a href="tickets.html" class="mybtn-size btn btn-lg btn-default" >我的券</a>
            <a href="" class="mybtn-size btn btn-lg btn-default" >晒单分享</a>
            <a href="addressmanage.html" class="mybtn-size btn btn-lg btn-default" >地址管理</a>
            <div class="mybtn-size btn btn-lg btn-default" id="set-account">账户设置 <i class="icon-caret-down"></i></div>
            <div onclick="window.location.href = 'updatepassword.html'" class="btn btn-lg btn-default change-pwd" style="display: none;">修改密码</div>
            <div onclick="window.location.href = 'userinfo.html'" class="btn btn-lg btn-default change-info" style="display: none;">修改资料</div>
            <div onclick="window.location.href = ''" class="btn btn-lg btn-default binding-account" style="display: none;">绑定帐号</div>
            <div style="background-color: RGB(244,166,36); height: 120px;"></div>

        </div><!--导航列表-->
        <div class="all-width my-cols-right info-back-color back-margin-padding col-sm-9 col-lg-9">
            <div class="row">
                <div class="small-search col-sm-12 col-lg-12">
                    <!-- row-search start -->
                    <div class="row">
                        <div class="small-search-a col-sm-4 col-lg-4 text-center">
                            <a class="collect-btn" style="color: RGB(244,166,36)" id="bingo-bag" href="#我的拼购券">我的拼购券</a>
                            <a class="collect-btn" id="lucky-bag" href="#我的代金券">我的代金券</a>
                        </div>
                        <div class="col-sm-4 col-lg-4"></div><!--搜索框表单-->
                    </div>
                    <!--row-search end-->
                </div>
            </div>



<!-- todo:标题和table的上边框应该重合 -->
            <div id="bingobag">
                <!-- 拼购券数量 start -->
                <div class="row" style="padding: 25px 65px 0 65px;">
                    <div class="col-sm-4 col-lg-4" style="border:none; margin-top: 40px;">
                        <h4>拥有拼购券</h4>
                    </div>
                    <div class="col-sm-offset-4 col-lg-offset-4 col-sm-4 col-lg-4 h5">
                        拼购券总数：<span style="color: RGB(244,166,36)">20</span>张<br><br>
                        共计：<span style="color: RGB(244,166,36);">￥59.00</span>
                    </div>
                </div>
                <div class="row" style="padding: 0 65px;">
                    <div class="" style=" width: auto; border:none;">
                        <table class="table table-hover text-center table-striped" style="margin-bottom: 0;">
                            <thead>
                            <tr>
                                <td>金额（元）</td>
                                <td>数量（张）</td>
                                <td>小计（元）</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>￥1.00</td>
                                <td><span>5</span></td>
                                <td><span>5.00</span></td>
                            </tr>
                            <tr>
                                <td>￥2.00</td>
                                <td><span>12</span></td>
                                <td><span>24.00</span></td>
                            </tr>
                            <tr>
                                <td>￥5.00</td>
                                <td><span>0</span></td>
                                <td><span>0.00</span></td>
                            </tr>
                            <tr>
                                <td>￥10.00</td>
                                <td><span>3</span></td>
                                <td><span>30.00</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 拼购券数量 end -->
                <br><br><br>
                <!-- 拼购券获得历史 start -->
                <div class="row" style="padding: 25px 65px 0 65px;">
                    <div class="col-sm-4 col-lg-4" style="">
                        <h4>拼购券获得历史</h4>
                    </div>
                </div>
                <div class="row" style="padding: 0 65px;">
                    <div class="" style=" width: auto; border:none;">
                        <table class="table table-hover text-center table-striped" style="margin-bottom: 0;">
                            <thead>
                            <tr>
                                <td>时间</td>
                                <td>金额</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2015-06-12 19:34</td>
                                <td>10元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            <tr>
                                <td>2015-05-30 22:54</td>
                                <td>5元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 拼购券获得历史 end -->
                <br><br><br>
                <!-- 拼购券使用历史 start -->
                <div class="row" style="padding: 25px 65px 0 65px;">
                    <div class="col-sm-4 col-lg-4" style="">
                        <h4>拼购券使用历史</h4>
                    </div>
                </div>
                <div class="row" style="padding: 0 65px;">
                    <div class="" style=" width: auto;">
                        <table class="table table-hover text-center table-striped" style="margin-bottom: 0;">
                            <thead>
                            <tr>
                                <td>时间</td>
                                <td>金额</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2015-04-23 21:44</td>
                                <td>2元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            <tr>
                                <td>2015-06-28 08:29</td>
                                <td>5元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 拼购券使用历史 end -->
            </div>

            <br><br><br>

<!-- todo:此处的标题框和table的上边框重合处没有 -->
            <div id="luckybag" style="display: none;">
                <!-- 代金券获得历史 start -->
                <div class="row" style="padding: 25px 65px 0 65px;">
                    <div class="col-sm-4 col-lg-4">
                        <h4>代金券获得历史</h4>
                    </div>
                    <div class="col-sm-offset-4 col-lg-offset-4 col-sm-4 col-lg-4 h5">
                        代金券余额：<span style="color: RGB(244,166,36);">￥0.00</span>
                    </div><br><br>
                </div>
                <div class="row" style="padding: 0 65px;">
                    <div class="" style=" width: auto;">
                        <table class="table table-hover text-center table-striped" style="margin-bottom: 0;">
                            <thead>
                            <tr>
                                <td>时间</td>
                                <td>金额</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2015-05-31 19:34</td>
                                <td>12元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            <tr>
                                <td>2015-06-01 12:07</td>
                                <td>5元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 代金券获得历史 end -->
                <br><br><br>
                <!-- 代金券使用历史 start -->
                <div class="row" style="padding: 25px 65px 0 65px;">
                    <div class="col-sm-4 col-lg-4">
                        <h4>代金券使用历史</h4>
                    </div>
                </div>
                <div class="row" style="padding: 0 65px;">
                    <div class="" style=" width: auto;">
                        <table class="table table-hover text-center table-striped" style="margin-bottom: 0;">
                            <thead>
                            <tr>
                                <td>时间</td>
                                <td>金额</td>
                                <td>操作</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>2015-06-08 14:32</td>
                                <td>12元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            <tr>
                                <td>2015-06-30 19:34</td>
                                <td>5元</td>
                                <td><div class="btn btn-text">查看</div></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- 代金券使用历史 end -->

            </div>
        </div>
    </div>
</div>


<div class="container">
    <!-- 猜你喜欢 start -->
    <div class="row">
        <div class="btn-habit-bar col-sm-offset-3 col-lg-offset-3 btn-group col-sm-9 col-lg-9">
            <button type="button" class="btn habit btn-default">猜你喜欢的商品</button>
            <button type="button" class="btn habit btn-default">猜你喜欢的拼购</button>
            <button type="button" class="btn habit btn-default">最近浏览</button>
            <button type="button" class="btn habit btn-default">最近收藏</button>
        </div>
    </div>
    <div class="row">
        <div class="btn-habit-img col-sm-offset-3 col-lg-offset-3 col-sm-9 col-lg-9">
            <div class="col-sm-3 col-lg-3 my-goods">
                <div title="(第3期) Apple iPad mini 3 16G WIFI版" style="overflow: hidden;text-overflow: ellipsis;">
                    <a href="#"><img class="goods-img" src="../imgs/index/手机平板/1-1.png" alt="">
                    <span><nobr>(第3期) Apple iPad mini 3 16G WIFI版</nobr></span></a>
                </div>
                <a class="btn my-btn-default-bgcolor button-set pull-right">查看</a>
            </div>
            <div class="col-sm-3 col-lg-3 my-goods">
                <div title="（第3期） 魅族MX5全金属手机" style="overflow: hidden;text-overflow: ellipsis;">
                    <a href="#"><img class="goods-img" src="../imgs/index/手机平板/1-4.png" alt="">
                        <span><nobr>（第3期） 魅族MX5全金属手机</nobr></span></a>
                </div>
                <a class="btn my-btn-default-bgcolor button-set pull-right">查看</a>
            </div>


            <div class="col-sm-3 col-lg-3 my-goods">
                <div title="（第8期）联想 Yoga3 13.3英寸笔记本电脑" style="overflow: hidden;text-overflow: ellipsis;">
                    <a href="#"><img class="goods-img" src="../imgs/index/电脑办公/2-4.png" alt="">
                        <span><nobr>（第8期）联想 Yoga3 13.3英寸笔记本电脑</nobr></span></a>
                </div>
                <a class="btn my-btn-default-bgcolor button-set pull-right">查看</a>
            </div>
        </div>
    </div>
    <!-- 猜你喜欢 end -->
</div>

<!--footer start-->
<div class="text-center" style="margin-top: 50px;color: #949494;" id="footer">
    <a href="#" style="color: #949494;"><span>首页</span></a>
    <span>|</span>
    <a href="#" style="color: #949494;"><span>关于一起购物</span></a>
    <span>|</span>
    <a href="#" style="color: #949494;"><span>隐私声明</span></a>
    <span>|</span>
    <a href="#" style="color: #949494;"><span>加入我们</span></a>
    <span>|</span>
    <a href="#" style="color: #949494;"><span>联系我们</span></a>
    <p style="margin-bottom: 0">CopyRight&copy;2014-2015,版权所有eachgo.cn</p>
</div>
<!--footer end-->
<script src="../js/jquery-2.1.4.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/myJs.js"></script>
<script src="../js/personalcenter.js"></script>
</body>
</html>